<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo01</title>
    <style type="text/css">
    .box{ width: 100%; height: 1000px; border: 1px solid #8841AB; }
    .grey{ width: 100px; height: 100px; border: 1px solid #DDD; }
    </style>
</head>
<body>
    <div class="box box1">
        <div class="grey grey11">11</div>
        <div class="grey grey12">22</div>
        <div class="grey grey13">33</div>
    </div>
    <div class="box box2">
        <div class="grey grey21">11</div>
        <div class="grey grey22">22</div>
        <div class="grey grey23">33</div>
    </div>
    <div class="box box3">
        <div class="grey grey31">11</div>
        <div class="grey grey32">22</div>
        <div class="grey grey33">33</div>
    </div>
    
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>

<script type="text/javascript">
var controller = new ScrollMagic.Controller();

var horizontalSlide = new TimelineMax()
    .to(".grey21", 1, {
        x: "100px"
    })
    .to(".grey22", 1, {
        x: "200px"
    })
    .to(".grey23", 1, {
        x: "300px"
    })


// create scene to pin and link animation
new ScrollMagic.Scene({
    triggerElement: ".box2",
    triggerHook: "onLeave",
    duration: "400%"
})
.setPin(".box2")
.setTween(horizontalSlide)
.addTo(controller);
</script>
</html>
